<template>
  <div class="portal-count">
    <el-card>
      <div class="item">
        <div class="head">预警</div>
        <div class="count">
          <avue-count-up :end="16" :start="0"></avue-count-up>
        </div>
      </div>
    </el-card>
    <el-card>
      <div class="item">
        <div class="head">我的待办</div>
        <div class="count">
          <avue-count-up :end="16" :start="0"></avue-count-up>
        </div>
      </div>
    </el-card>
    <el-card>
      <div class="item">
        <div class="head">通知消息</div>
        <div class="count">
          <avue-count-up :end="16" :start="0"></avue-count-up>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script setup></script>
<style scoped lang="scss">
.portal-count {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  .item {
    width: 100%;
    height: 110px;

    .head {
      font-size: 16px;
      font-weight: bold;
    }

    .count {
      width: 100%;
      height: 100%;
      font-size: 28px;
      font-weight: bold;
      color: #3ca8f0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
